<template>
	<view class="UploadSubmit">
		<view class="package-title font-weight-600 color3 size-28 border-bottom">{{deliveryStatus == 5?'拍照留证':'取件拍照'}}
		</view>
		<view v-if="item.deliveryType == 1">
			<view class="package font-weight-400 color-8 size-24" v-if="deliveryStatus == 5">请拍摄包裹送达现场的照片</view>
			<view class="package font-weight-400 color-8 size-24" v-else>请拍摄包裹带有快递单那面的正面照</view>
		</view>
		<view v-else>
			<view v-if="deliveryStatus == 5" class="package font-weight-400 color-8 size-24">请拍摄商品送达现场的照片</view>
			<view v-else class="package font-weight-400 color-8 size-24">请拍摄商品图片</view>
		</view>
		<!-- 			<view>
				本单共 <text class="font-weight-600 color3">{{item.deliveryCount}}</text> 
				件包裹，图片至少上传 <text class="font-weight-600 color3">{{item.deliveryCount}}</text> 张
			</view> -->
		<u-upload @afterRead="onAfterRead" name="upload" multiple>
			<view class="upload radius12 dis">
				<image class="upload-icon" src="@/static/icon/zx.png" mode=""></image>
				<text class="font-weight-400 color-8 size-24">点击拍照</text>
			</view>
		</u-upload>
		<view class="upload-name font-weight-600 color3 size-28"
			v-if="imgList['takeUrl'].length || imgList['serviceUrl'].length">已上传图片</view>
		<view class="upload-img">
			<view class="por margin-20" v-for="(item,index) in imgList[delData[deliveryStatus].img]" :key="index">
				<view class="guanbi poa dis radius100" @click="onDeletePicImg(index)">
					<text class="iconfont icon-guanbi color-f"></text>
				</view>
				<u--image radius="12rpx" :src="item.url" width="152rpx" height="152rpx" @click="onPreviewImage(index)">
					<view slot="error" class="size-24">加载失败</view>
				</u--image>
			</view>
		</view>
		<u-button type="primary" :hoverStartTime="3000"
			:customStyle="{width: '668rpx',height: '80rpx',margin: '44rpx auto 0', borderRadius: '8rpx'}"
			:color="deliveryStatus == 4?'#FF1E1E':'#FF981A'" @click="onSavePicture">
			<text class="color-f font-weight-500 size-32" v-if="deliveryStatus == 5">保存图片并送达</text>
			<text class="color-f font-weight-500 size-32" v-else>保存图片并设为已取货</text>
		</u-button>
		<!-- 		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="10"></u-upload> -->
	</view>
</template>

<script>
	import { MultipassUpload } from "@/utils/index"
	import { UpdOrdersStatus } from "@/api/index"
	export default {
		props: {
			deliveryStatus: { // 4=取货，5=配送
				type: Number,
				default: 5
			},
			item: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				delData: {
					4: { img: 'takeUrl', type: 8 },
					5: { img: 'serviceUrl', type: 9 }
				},
				imgList: {
					takeUrl: [],
					serviceUrl: [],
				},
				// orLeng: 0
			}
		},
		// computed() {
		// 	this.imgList.takeUrl = []
		// 	this.imgList.serviceUrl = []
		// },
		methods: {
			async onSavePicture() {
				const { deliveryStatus, imgList, delData, item } = this
				let title = ''
				// if (deliveryStatus*1 == 4 && this.paramsDataList().length < item.deliveryCount) {
				// 	title = `还需上传${item.deliveryCount*1 - this.paramsDataList().length*1}张图片`
				// }
				if (!this.paramsDataList().length) title = "请上传图片"
				if (title) {
					uni.showToast({
						title: title,
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const datas = {
					takeUrl: this.paramsDataList().join(','), // 取件图片
					serviceUrl: this.paramsDataList().join(','), // 送达图片
					type: deliveryStatus == 4 ? 2 : 3,
					orderId: item.orderId
				}
				const { data, code } = await UpdOrdersStatus(datas)
				if (code == '200') {
					this.phoShow = false
					// this.postGetExpressOrderList()
					this.imgList.takeUrl = []
					this.imgList.serviceUrl = []
					uni.showToast({
						title: '操作成功',
						duration: 2000
					});
				}
				this.$emit('savePicture', datas)
			},
			// 上传
			async onAfterRead(evet) {
				const { deliveryStatus, imgList, delData } = this
				const url = await MultipassUpload(evet.file, delData[deliveryStatus].type, imgList[delData[
					deliveryStatus].img])
				this.imgList[delData[deliveryStatus].img] = url
				console.log('evetevetevetevet', url)
			},
			// 处理数据
			paramsDataList() {
				let listImg = []
				const { deliveryStatus, delData } = this
				this.imgList[delData[deliveryStatus].img].map(res => {
					listImg.push(res.url)
				})
				return listImg
			},
			onPreviewImage(index) {
				const { deliveryStatus, delData } = this
				uni.previewImage({
					current: index * 1,
					urls: this.paramsDataList()
				});
			},
			// 删除图片
			onDeletePicImg(index) {
				const { deliveryStatus, delData } = this
				this.imgList[delData[deliveryStatus].img].splice(index, 1)
			},
		}
	}
</script>

<style lang="scss">
	.UploadSubmit {
		padding: 24rpx 0 20rpx;

		.package-title {
			padding: 24rpx 0 26rpx;
			text-align: center;
		}

		.package {
			padding: 20rpx 40rpx;
			line-height: 40rpx;

			.font-weight-600 {
				margin: 0 8rpx;
			}
		}

		.upload {
			width: 152rpx;
			height: 152rpx;
			background: #FFFFFF;
			border: 1px solid #E7E7E7;
			flex-direction: column;
			margin-left: 40rpx;

			.upload-icon {
				width: 36rpx;
				height: 34rpx;
				margin-bottom: 8rpx;
			}
		}

		.upload-name {
			padding: 24rpx 40rpx 0;
		}

		.upload-img {
			display: flex;
			flex-wrap: wrap;
			margin-left: -10rpx;
			padding: 0 30rpx 0rpx 40rpx;

			.margin-20 {
				padding: 20rpx 10rpx 0;
			}

			.guanbi {
				width: 40rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 10;
				right: -2rpx;
				top: 10rpx;
			}
		}
	}
</style>